<template>
  <view class="read">
    <view class="check" @click="check = !check">
      <image v-if="check" class="img" src="/static/icon/14.png"></image>
    </view>
    <view class="name" v-for="(item, index) in props.list" :key="index" @click="isClause = true">《{{ item }}》</view>
  </view>

  <!-- 协议 -->
  <clausePopup :html="props.html" :isShow="isClause" @close="isClause = false"></clausePopup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import clausePopup from '@/components/popup/clause.vue'
let check = ref(false)
const props = defineProps({
  // 0 => 赛事 1 => 活动
  list: {
    type: Array,
    default() {
      return []
    }
  },
  html: {
    type: String,
    default() {
      return ''
    }
  }
})

let isClause = ref(false)

defineExpose({
  check
})
</script>

<style lang="scss" scoped>
.read {
  width: 100%;
  padding: 38rpx 26rpx;
  background-color: #f9f9f9;
  white-space: pre-wrap;
  display: inline-block;
  .check {
    float: left;
    width: 40rpx;
    height: 40rpx;
    display: inline;
    border-radius: 20rpx;
    border: 1px solid #eee;
  }
  .name {
    float: left;
    display: inline;
    color: #4786e9;
    font-size: 28rpx;
    &::before {
      color: #333333;
      margin: 0 10rpx 0 16rpx;
      content: '我已阅读并同意';
    }
  }
}
</style>
